<template>
  <v-card>
    <v-card-title>
      <v-btn color="primary" @click="addBrand">新增返厂单</v-btn>
      <!--搜索框，与search属性关联-->
      <v-spacer />
      <v-flex xs3>
        <v-text-field label="输入关键字搜索" v-model.lazy="search" append-icon="search" hide-details />
      </v-flex>
    </v-card-title>
    <v-divider />
    <v-data-table
      :headers="headers"
      :items="purchases"
      :pagination.sync="pagination"
      :total-items="totalBrands"
      :loading="loading"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td class="text-xs-center">{{ props.item.lsh }}</td>
        <td class="text-xs-center">{{ props.item.storeCode +'-'+ props.item.storeName}}</td>
        <td class="text-xs-center">{{ props.item.lxInfo }}</td>
        <td class="text-xs-center">{{ props.item.statusInfo }}</td>
        <td class="text-xs-center">{{ props.item.truename }}</td>
        <td class="text-xs-center">{{ props.item.lrsj }}</td>
        <td class="text-xs-center">{{ props.item.cksj }}</td>
        <td class="justify-center layout px-0">
          <v-btn
            icon
            @click="editBrand(props.item)"
            v-if="props.item.status==1 || props.item.status==9"
          >
            <i class="el-icon-view" />
          </v-btn>
          <v-btn v-if="props.item.status==0" icon @click="editBrand(props.item)">
            <i class="el-icon-edit" />
          </v-btn>
        </td>
      </template>
    </v-data-table>
    <!--弹出的对话框-->
    <v-dialog max-width="700" v-model="show" hide-overlay transition="dialog-bottom-transition">
      <v-card>
        <!--对话框的标题-->
        <v-toolbar dense dark color="primary">
          <v-toolbar-title>返厂单</v-toolbar-title>
          <v-spacer />
          <!--关闭窗口的按钮-->
          <v-btn icon @click="closeWindow">
            <v-icon>close</v-icon>
          </v-btn>
          <v-toolbar-items>
            <v-btn dark flat @click="dialog = false" v-show="false">提交</v-btn>
          </v-toolbar-items>
        </v-toolbar>
        <!--对话框的内容，表单-->
        <v-card-text class="px-5" style="height:auto">
          <return-form :isck=false @close="closeWindow" :oldpurchase="oldBrand" :isEdit="isEdit" />
        </v-card-text>
      </v-card>
    </v-dialog>
  </v-card>
</template>

<script>
// 导入自定义的表单组件
import returnForm from "./ReturnForm";

export default {
  name: "purchase",
  data() {
    return {
      search: "", // 搜索过滤字段
      totalBrands: 0, // 总条数
      purchases: [], // 当前页路线数据
      loading: true, // 是否在加载中
      pagination: {}, // 分页信息
      headers: [
        { text: "流水号", align: "center", sortable: false, value: "name" },
        { text: "店铺", align: "center", sortable: false, value: "" },
        { text: "商品类型", align: "center", sortable: false, value: "lx" },
        { text: "单据状态", align: "center", value: "status", sortable: false },
        { text: "录入人", align: "center", sortable: false, value: "image" },
        { text: "录入时间", align: "center", value: "lrsj", sortable: false },
        { text: "审核时间", align: "center", value: "cksj", sortable: false },
        // { text: "手机号", align: "center", value: "phone", sortable: true },
        // { text: "联系人", align: "center", value: "contact", sortable: false },
        { text: "操作", align: "center", sortable: false }
      ],
      show: false, // 控制对话框的显示
      oldBrand: {}, // 即将被编辑的路线数据
      isEdit: false // 是否是编辑
    };
  },
  watch: {
    pagination: {
      // 监视pagination属性的变化
      deep: true, // deep为true，会监视pagination的属性及属性中的对象属性变化
      handler() {
        // 变化后的回调函数，这里我们再次调用getDataFromServer即可
        this.getDataFromServer();
      }
    },
    filter: {
      // 监视搜索字段
      handler() {
        this.getDataFromServer();
      },
      deep: true
    }
  },
  mounted() {
    // 渲染后执行
    // 查询数据
    this.getDataFromServer();
  },
  watch: {
    pagination: {
      // 监视pagination属性的变化
      deep: true, // deep为true，会监视pagination的属性及属性中的对象属性变化
      handler() {
        // 变化后的回调函数，这里我们再次调用getDataFromServer即可
        this.getDataFromServer();
      }
    },
    search: {
      // 监视搜索字段
      handler() {
        this.getDataFromServer();
      }
    }
  },
  methods: {
    getDataFromServer() {
      // 从服务的加载数的方法。
      // 发起请求
      this.$http
        .get("/item/fc/page", {
          params: {
            key: this.search, // 搜索条件
            page: this.pagination.page, // 当前页
            rows: this.pagination.rowsPerPage, // 每页大小
            sortBy: this.pagination.sortBy, // 排序字段
            desc: this.pagination.descending // 是否降序
          }
        })
        .then(resp => {
          // 这里使用箭头函数
          this.purchases = resp.data.items;
          this.totalBrands = resp.data.total;
          // 完成赋值后，把加载状态赋值为false
          this.loading = false;
        })
        .catch(a => {
          this.loading = false;
        });
    },
    addBrand() {
      // 修改标记
      this.isEdit = false;
      // 控制弹窗可见：
      this.show = true;
      // 把oldBrand变为null
      this.oldBrand = null;
    },
    editBrand(oldBrand) {
      this.$http.get("/item/fc/bill/?lsh=" + oldBrand.lsh).then(({ data }) => {
        // 修改标记
        this.isEdit = true;
        // 控制弹窗可见：
        this.show = true;
        // 获取要编辑的brand
        // this.oldBrand = oldBrand;
        this.oldBrand = data;
      });
    },
    closeWindow() {
      // 重新加载数据
      this.getDataFromServer();
      // 关闭窗口
      this.show = false;
    }
  },
  components: {
    returnForm
  }
};
</script>

<style scoped>
</style>
